/* eslint-disable */
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      // 控制步骤条
      activeStep: 1,
      // 控制标签页
      activeName: 'three',
      // 添加商品对象
      goodsAddForm: {
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_number: '',
        goods_cat: [],
        goods_isPromotion: false,
        // 收集上传图片的路径
        pics: [],
        //富文本内容
        goods_introduce: ''
      },
      defaultProps: {
        label: 'cat_name',
        value: 'cat_id'
      },
      options: [
        {
          value: 'ziyuan',
          label: '资源',
          children: [
            {
              value: 'axure',
              label: 'Axure Components'
            },
            {
              value: 'sketch',
              label: 'Sketch Templates'
            },
            {
              value: 'jiaohu',
              label: '组件交互文档'
            }
          ]
        }
      ],
      // 上传图片部分
      dialogImageUrl: '',
      dialogVisible: false,
      // 请求头
      headers: {
        Authorization: localStorage.getItem('token')
      },
      //富文本配置项
      editorOption: {
        placeholder: '哈哈'
      },
      htmlStr: `<h1 class='red'>我是h1</h1>`
    }
  },
  created() {
    this.loadCatList()
  },
  methods: {
    // 点击了标签页
    clickTabs(el) {
      console.log(el.index)
      this.activeStep = +el.index + 1
    },
    // 下一步
    next(name, index) {
      this.activeName = name
      this.activeStep = index
    },
    // 获取所有的分类
    async loadCatList() {
      let res = await this.$axios.get('categories', {
        params: {
          type: 3
        }
      })
      console.log(res.data.data)
      this.options = res.data.data
    },
    // 上传图片部分
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传图片成功回调
    uploadSuccess(res) {
      console.log(res.data.tmp_path)
      this.goodsAddForm.pics.push({
        pic: res.data.tmp_path
      })
    },
    // 添加商品
    async addGoods() {
      const {
        goods_name,
        goods_price,
        goods_weight,
        goods_number,
        goods_cat,
        goods_isPromotion,
        pics,
        goods_introduce
      } = this.goodsAddForm

      let res = await this.$axios.post('goods', {
        goods_name,
        goods_price,
        goods_weight,
        goods_number,
        goods_cat :  goods_cat.join(',')  ,
        goods_isPromotion,
        pics,
        goods_introduce
      })
      console.log(res);
      if (res.data.meta.status === 201) {

        this.$message({
          message: '添加商品成功',
          type : 'success'
        })

        this.$router.push('/goods')

      }

    }
  }
}
